<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>牧心农业</title>
    <link rel="stylesheet" type="text/css" href="/static/css/eui.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/calendar.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/mobile.css" />
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/doT.min.js"></script>
    <script src="/static/js/calendar.js"></script>
    <script src="/static/js/func.js"></script>
</head>
<body>
<div class="confirm_content margin_top_foot">
    <header class="header fixed_top bg_mx_green"></header>
    <div class="bg_mx_green padding_15" style="padding-top:0;">
        <div class="bg_white padding_10_15 color_black font_16 room"></div>
    </div>
    <div class="bg_white light padding_15 margin_b_15">订单确认后，<span class="warning">入住当天14点之前可免费取消，逾期不可取消或退款</span>。房间整晚保留，请及时入住。</div>
    <form class="order_info">

        <input name="_csrf" type="hidden" id="_csrf" value="<{$app->request->csrfToken}>">
        <input name="houseid" type="hidden" id="id" value="<{$app->request->get('id')}>">
        <div class="padding_h_15 bg_white">
            <div class="padding_v_10 border_b v_center arrow_right open_calendar">
                <div class="width_70">时间</div>
                <div class="left_70">
                    <div class="flex">
                        <div class="width_100 start_date"></div>
                        <div class="left_100 light">入住</div>
                        <input type="hidden" name="start_date">
                    </div>
                    <div class="flex">
                        <div class="width_100 end_date"></div>
                        <div class="left_100 flex light">
                            <div class="">离店</div>
                            <div class="padding_l_15">共<span class="room_days"></span>晚</div>
                        </div>
                        <input type="hidden" name="end_date">
                        <input type="hidden" name="days">
                    </div>
                </div>
            </div>
            <div class="padding_v_10 border_b flex arrow_right">
                <div class="width_70">房间数</div>
                <div class="left_70">
                    <select class="room_num" name="number"></select>
                </div>
            </div>
            <div class="padding_v_10 border_b flex">
                <div class="width_70">入住人</div>
                <div class="left_70">
                    <input type="text" placeholder="请输入您的姓名" name="name" request title="入住人">
                </div>
            </div>
            <div class="padding_v_10 border_b flex">
                <div class="width_70">联系手机</div>
                <div class="left_70">
                    <input type="text" placeholder="请输入您的手机号" name="tel" request title="手机号" data-pattern="^(0|86|17951)?(13\d|15[0-35-9]|17[678]|18\d|14[57])\d{8}$" data-tips="11位手机号">
                </div>
            </div>
            <div class="padding_v_10 border_b flex arrow_right">
                <div class="width_70">预计到店</div>
                <div class="left_70">
                    <input type="time" name="time" name="tel" request title="预计到店时间">
                </div>
            </div>
            <{if !empty($score) }>
            <div class="padding_v_10 border_b bg_white h_justify font_14 credit_reduce">
                <label class=""><input type="checkbox" name="usecredit" class="checkbox" value="<{$score}>"> 是否使用积分抵扣</label>
                <div class="light"><span class="credit"><{$score}></span>积分可抵<span class="reduce"><{$reduce}></span>元</div>
            </div>
            <{/if}>
            <div class="padding_v_10 flex">
                <div class="width_70">备注信息</div>
                <div class="left_70">
                    <textarea placeholder="请输入备注" rows="3" name="remark"></textarea>
                </div>
            </div>
        </div>
        <footer class="confirm_foot bg_white fixed_bottom">
            <div class="border_t_mx padding_h_15 flex_justify confirm_btn">
                <div class="font_20 warning">￥<span class="total">80.00</span></div>
                <button class="btn btn_danger gobuy">确认支付</button>
            </div>
        </footer>
    </form>
</div>
<div class="calendar_b bg_dark fixed all flex_center hide">
    <div class="calendar calendar_day">
        <div class="view_date"></div>
        <div class="view_month"></div>
        <div class="calendar_close">
            <div class="closeBtn margin_v_15">确定</div>
        </div>
    </div>
</div>
<div class="toast"></div>
<!-- toast模版 -->
<script type="text/template" charset="utf-8" id='toast_template'>
    <i class="iconfont icon-toast{{=it.icon}}"></i>
    <div class="toast_text">{{=it.text}}</div>
</script>
<script type="text/template" id='room_template'>
    <div>{{=it.title}}</div>
    <div class="font_14 danger">￥{{=it.price}}元/人/天</div>
</script>
<script type="text/template" id='num_template'>
    {{for(var i=0;i< roomnum;i++){}}
    <option value="{{=i+1}}">{{=i+1}}间</option>
    {{}}}
</script>
<script type="text/template" charset="utf-8" id='date_template'>
    <div class="calendar_title">
        <div class="calendar_display"><span class="year">{{=it.year}}</span>/<span class="dark m">{{=it.month}}</span></div>
        <div class="calendar_arrow">
            <span class="prev triangle_left" title="上一月"></span>
            <span class="next triangle_right" title="下一月"></span>
        </div>
    </div>
    <div class="calendar_body date">
        <ul class="week">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ul class="days">
            {{for(var i=0;i<it.data.olds.length;i++){ }}
            <li class="old" disabled>{{=it.data.olds[i]}}</li>
            {{ } }}
            {{for(var i=0;i<it.data.lasts.length;i++){ }}
            <li class="last" disabled>{{=it.data.lasts[i]}}</li>
            {{ } }}
            {{for(var i=0;i<it.data.nows.length;i++){ }}
            <li class="{{if(it.data.lasts.length && i==0){}}now{{}}} {{for(var j=0;j<it.data.selected.length;j++){ }}{{if(it.data.selected[j]==i){}}selected{{}}}{{ } }}">{{=it.data.nows[i]}}</li>
            {{ } }}
            {{for(var i=0;i<it.data.news.length;i++){ }}
            <li class="new" disabled>{{=it.data.news[i]}}</li>
            {{ } }}
        </ul>
    </div>
</script>
<script type="text/template" charset="utf-8" id='month_template'>
    <div class="calendar_title">
        <div class="calendar_display year">{{=it.nowyear}}</div>
        <div class="calendar_arrow">
            <span class="prev triangle_left" title="上一年"></span>
            <span class="next triangle_right" title="下一年"></span>
        </div>
    </div>
    <div class="calendar_body month">
        {{for(var i=1;i<13;i++){ }}
        {{if(it.nowyear==it.now[0] && i<it.now[1]){}}
        <li class="last" disabled>{{=i}}月</li>
        {{}else if(it.nowyear==it.now[0] && it.now[1]==i){}}
        <li class="now" data-v="{{=i}}">{{=i}}月</li>
        {{}else if(it.nowyear==it.year && it.month==i){}}
        <li class="selected" data-v="{{=i}}">{{=i}}月</li>
        {{}else{}}
        <li data-v="{{=i}}">{{=i}}月</li>
        {{}}}
        {{ } }}
    </div>
</script><script>
    // 页面初始化
    //            var room = {title:"赵四家农家食宿",price:"80.00",credit:21,reduce:0.2};
    var room = <{$house}>;
    var roomnum = room.roomnum;
    // console.log(room)
    var evalroom = doT.template($("#room_template").text());
    var evalnum = doT.template($("#num_template").text());
    var evalToast = doT.template($("#toast_template").text());
    loaddata(".room",evalroom,room);
    loaddata(".room_num",evalnum,roomnum);
    if(room.credit){
        $(".credit").html(room.credit)
        $(".reduce").html(room.reduce)
    }else{
        $(".credit_reduce").hide()
    }
    loadheadbar("订单确认");
    // 日历初始化
    var evalmonth = doT.template($("#month_template").text());
    var evaldate = doT.template($("#date_template").text());
    var today = f_d(new Date());
    var tomorrow = f_d(new Date(parseInt(new Date()/1000)*1000+1000*60*60*24));
    dateinit([today,tomorrow],1);
    $('.calendar').calendar({
        trigger:".open_calendar",
        select:"now",
        type:"range",
        onSelected: function (date,days) {
            $(".calendar_b").hide()
            dateinit(date,days);
            console.log(date);
            $.post('/farmerhouse/order/roomnum',{'_csrf':"<{$app->request->csrfToken}>",'data':date,'id':room.id},function(res){
                roomnum = res.num;
                loaddata(".room_num",evalnum,roomnum);
            },'json');
        }
    });
    $(".calendar_b").click(function(e){
        if(e.target == this){
            $(".calendar_b").hide();
            $("body").removeClass("row");
            $(window).unbind('touchmove');
        }
    })
    function dateinit(date,days){
        $(".start_date").html(date[0]);
        $("input[name='start_date']").val(date[0]);
        $(".end_date").html(date[1]);
        $("input[name='end_date']").val(date[1]);
        $(".room_days").html(days);
        $("input[name='days']").val(days);
        total();
    }
    // 改变房间数
    $(".room_num").change(function(){
        total();
    })
    function total(){
        var num = $("input[name='days']").val();
        var person = $("select[name='number']").val();
        var total = F(room.price)*num*I(person);
        $(".total").html(total.toFixed(2))
    }
    // 是否使用积分抵扣
    $("input[name='usecredit']").change(function(){
        var total = parseFloat($(".total").html());
        if($("input[name='usecredit']:checked").length){
            total -= parseFloat(room.reduce);
        }else{
            total += parseFloat(room.reduce);
        }
        console.log(total);
        $(".total").html(total.toFixed(2))
    })
    // 提交订单
    var submited = false;
    $(".order_info").submit(function(e){
        e.preventDefault();
        with(this){
            for (var i = 0; i < this.length; i++) {
                if($(this[i]).attr("request")==""){
                    if(!checkone(this[i])){
                        return false;
                    }
                }
            }
            if(submited) return false;
            var data_submit = $(".order_info").serializeObject();console.log(data_submit)
            $.post("/farmerhouse/order/pre-pay",data_submit,function(res){
                submited = true;
                toast("attention",res.msg);
                if(res.status == 0){
                    location.href = res.url;
                }
            },"json")
        }
    })
</script>
</body>
</html>
